$(() => {
    // 1、发送请求 动态渲染文章分类，下拉框
    function getCategoryList() {
        $.get('/admin/category/list', (res) => {
            // 1.1、定义一个变量，获取从后台拿到的数据
            const artType = res.data;
            // 1.2、利用模板引擎，动态渲染页面
            const options = template('artTypeTpl', {
                artType
            });
            // 1.3、将在模板引擎生成的html结构渲染到页面
            $('#selCategory').append(options);
        })
    };

    // 0、定义一个全局变量，获取文章列表数据 的 参数 
    let params = {
        // key	string	搜索关键词，可以为空，为空返回某类型所有文章
        key: '',
        // type	string	文章类型id，可以为空，为空返回所有类型文章
        type: '',
        // state	string	文章状态，草稿 ，已发布,为空返回所有状态文章
        state: '',
        // page	number	当前页，为空返回第1页
        page: 1,
        // perpage	number	每页显示条数，为空默认每页15条
        perpage: 15,
    };

    // 定义一个全局变量，数据带总条数，
    let totalCount = 0;
    // 2、获取文章列表信息
    function getArticleQuery() {
        // 2.1、向 /admin/article/query 接口发送请求，拿到后台数据
        $.get('/admin/article/query', params, res => {
            // 2.2、定义一个变量，存放后台数据
            const list = res.data.data;
            // 2.3、利用模板引擎，动态生成结构
            const tr = template('trTpl', {
                list
            });
            // 2.4、将在模板引擎生成的html结构渲染到页面
            $('#tbody').html(tr);

            // 获取总条数
            totalCount = res.data.totalCount;
            // 渲染分页组件
            renderPage();
        })
    };

    // 3、给筛选按钮绑定点击事件
    $('#btnSearch').click(() => {
        params.page = 1;
        // 3.1、获取 用户要筛选的数据
        params.key = $('#aname').val().trim(); //  关键字
        params.type = $('#selCategory').val(); //  类别
        params.state = $('#selStatus').val(); //  状态
        // 3.2、发送请求
        getArticleQuery();
    })

    // 4、给重置按钮绑定事件
    $('input[type="reset"]').click(() => {
        params.page = 1;
        //  4.1 重置 表单 组件
        $('#aname').val("");
        $('#selCategory').val("");
        $('#selStatus').val("");
        // 4.2、重置数据
        params.key = '';
        params.type = '';
        params.state = '';
        // 4.3、发送请求
        getArticleQuery();
    })

    //  5、渲染分页组件
    /*
        分页
        接口参数    （理解）
        分页组件    （理解）
        业务    接口参数 和 分页 组装如何使用 （理解） 
     */
    function renderPage() {
        layui.use('laypage', function () {
            layui.laypage.render({
                elem: 'pager',
                // //获取起始页
                curr: params.page,
                groups: 8,
                count: totalCount, //数据的总数
                limit: params.perpage,
                jump(obj, first) {

                    // 被点击的页数
                    if (!first) {
                        // 给全局参数赋值
                        params.page = obj.curr;
                        // 当前点击了其他页面，重新给当前页面赋值
                        // 重新发送一次请求获取对应页码数据
                        getArticleQuery();
                        // 存在 bug ，每点击一次，页码都重新变回1
                    }
                }
            })
        });

    }
    // 6、给删除按钮绑定事件
    $('#tbody').on('click', '.delete', function () {
        const id = $(this).data('id');
        layer.confirm('您是否确定删除?', {title: '提示'}, function (index) {
            $.post('/admin/article/delete', {id}, res => {
                layer.msg(res.msg);
                getArticleQuery();
            });
            layer.close(index);
        });

    })

    // 1、发送请求 动态渲染文章分类，下拉框
    getCategoryList();
    // 2、获取文章列表信息
    getArticleQuery();
});